// 配置路由规则的js 文件, 创建路由对象

//01: 引入下载好的路由包
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

//02: 引入页面路由组件
import Home from '@/views/Home.vue';
import Category from '@/views/Category.vue';
import Cart from '@/views/Cart.vue'
import Mine from '@/views/Mine.vue'
import Detail from '@/views/Detail.vue'
// 引入404组件
import Notfind from '@/views/Notfind.vue'
// 引入 mine1 和mine2组件
import Mine1 from '@/views/Mine1.vue'
import Mine2 from '@/views/Mine2.vue'

// 引入登录组件
import Login from '@/views/Login.vue'
//03: 定义路由映射表表
const routes = [
    {
        path: '/', // 路由地址
        // redirect: '/home' // 路由重定向
        // redirect: { name: 'home' },
        redirect: to => ({ path: '/home' })
    },
    {
        path: '/home', // 路由地址
        component: Home,  // 该路径对应的组件
        name: 'home', // 命令路由
        meta: { title: '首页' }
    },
    {
        path: '/category',
        component: Category,
        name: 'category',
        meta: { title: '分类页' }
    },
    {
        path: '/cart/:id',
        component: Cart,
        name: 'cart',
        meta: { title: '购物车页' },
        // 路由独享守卫
        // beforeEnter: (to, from, next) => {
        //     let token = localStorage.getItem('token');
        //     if (token) {
        //         next()
        //     } else {
        //         alert('请先登录!')
        //         next('/login')
        //     }
        // }
    },
    {
        path: '/mine',
        component: Mine,
        name: 'mine',
        meta: { title: '我的页' },
        children: [
            {
                path: '/mine', // 设置默认显示的二级路由
                component: Mine1,
                meta: { title: 'Mine1页面' }
            },
            {
                path: 'mine1',
                component: Mine1,
                name: 'mine1',
                meta: { title: 'Mine1页面' }
            },
            {
                path: '/mine/mine2',
                component: Mine2,
                name: 'mine2',
                meta: { title: 'Mine2页面' }
            }
        ]
    },
    {
        path: '/detail/:abc?/:id?', // 设置动态路由 ?表示可选
        component: Detail,
        name: 'detail',
        meta: { title: '详情页' }
    },
    {
        path: '/login',
        component: Login,
        name: 'login',
        meta: { title: '登录页' }
    },
    {
        path: '/:pathMatch(.*)*', // 404 路由
        name: 'notfind',
        component: Notfind,
        meta: { title: '404' }
    }
]

//04: 创建路由实例对象
const router = createRouter({
    history: createWebHistory(), // 指定路由模式
    routes // 路由映射表
});

// 路由模式 总共有3种, 常用2种
// 01:hash 模式  createWebHashHistory()
// 地址中带有#
// 监听的window上的hashchange事件, 然后切换页面
// 如果打包上线,放在服务器上, 不需要任何处理
// 02:history模式   createWebHistory() 常用
// 地址中没有#
// 监听的是 popstate, 然后页面
// 打包上线, 放在服务器上, 需要后台配合, 刷新出现404 ,需要后端重定向首页页面


// 定义全局前置守卫
// 定义:项目中任意一个路由发生跳转前都会触发router.beforeEach的回调函数函数
// 第一种情况: return 没有返回值,返回值为undefiend 或返回值为true 都正常放行
// 第二种情况: return 返回false 中断导航跳转
// 第三种情况: return 新的地址 重定向一个新的地址

// beforeEach 回调函数中参数:
// to: 表示目标路由对象(下一个路由对象)
// from :表示上一个路由对象
// router.beforeEach((to, from) => {
//     console.log('路由前置守卫');
//     // console.log(to, from);
//     if (to.path == '/home') {
//         // return '/cart'
//         return { name: 'cart' }
//     }
// })


// 使用带有可选参数next的情况
// 注意: next 参数如有有该参数, 则必须使用该参数进行导航
// 第一种: next() 表示正常放行, 如果没有该next() 说明不放行,无法实现跳转
// 第二种: next(false)  表示中断导航
// 第三种:next(新的导航地址) 表示重定向到新的地址
// router.beforeEach((to, from, next) => {
//     if (to.path == '/home') {
//         console.log('/home');
//         next('/cart')
//     }
//     next()
// })


// 路由登录守卫案例:
// router.beforeEach((to, from) => {
//     let token = localStorage.getItem('token');  // 字符串 或 null
//     // 判断当前要跳转的路由
//     if (to.path != '/login') {
//         // 首页. 分类 购物车 我的 等等页面
//         if (!token) {
//             // 没有token 返回到登录页
//             return '/login'
//         }
//         // 否则 正常放行
//     }
//     // 判断当前要跳转到登录页的情况
//     if (to.path == '/login') {
//         if (token) {
//             return '/home'
//         }
//         // 否则 正常放行
//     }
// })


//全局后置守卫
//定义: 全局任意路由已经跳转后触发的router.afterEach的回调函数
router.afterEach((to, from) => {
    console.log('to', to);
    // 修改页面标题
    document.title = to.meta.title
})




//05: 默认导出
export default router



